<template>
  <nav>
    <div class="banxin nav_in">
      <ul class="tanxin">
        <li @click="$router.push('/discover/home')" :class="{'active': $route.path.includes('home')}">推荐</li>
        <li @click="$router.push('/discover/toplist')" :class="{'active': $route.path.includes('toplist')}">排行榜</li>
        <li @click="$router.push('/discover/songmenu')" :class="{'active': $route.path.includes('songmenu')}">歌单</li>
        <li @click="$router.push('/discover/djradio')" :class="{'active': $route.path.includes('djradio')}">主播电台</li>
        <li @click="$router.push('/discover/artist')" :class="{'active': $route.path.includes('artist')}">歌手</li>
        <li @click="$router.push('/discover/album')" :class="{'active': $route.path.includes('album')}">新碟上架</li>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navActive: 1,
    };
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
nav {
  background: @red;
  width: 100%;
  position: sticky;
  top: 95px;
  left: 0;
  right: 0;
  z-index: 100;
  .nav_in {
    height: 35px;
    align-items: center;
    ul {
      width: 500px;
      margin: 0 220px;
      li {
        cursor: pointer;
        line-height: 24px;
        font-size: 12px;
        color: #ffffff;
        box-sizing: border-box;
        padding: 0 15px;
        border-radius: 12px;
        &.active {
          background: #c20c0c;
          // background-color: rgba(0, 0, 0, 0.2);
        }
      }
    }
  }
}
</style>